---
import LayoutMain from "@layouts/LayoutMain.astro";
import LayoutMainBottom from "@layouts/LayoutMainBottom.astro";
import LayoutMainBottomLeft from "@layouts/LayoutMainBottomLeft.astro";
import LayoutMainBottomRight from "@layouts/LayoutMainBottomRight.astro";
import LayoutMainTop from "@layouts/LayoutMainTop.astro";
import CommonTop from "@components/common/CommonTop.astro";
import AsideNotice from "../common/aside/AsideNotice.astro";
import AsideAuthor from "../common/aside/AsideAuthor.astro";
import AsideComment from "../common/aside/AsideComment.astro";
import AsideWebInfo from "../common/aside/AsideWebInfo.astro";
import AsideHotTag from "../common/aside/AsideHotTag.astro";
import AsideArticleList from "../common/aside/AsideArticleList.astro";
import ArticleList from "@components/article/ArticleList.astro";
import LayoutFooter from "@layouts/LayoutFooter.astro";
import CommonPage from "@components/common/page/CommonPage.astro";
import CommonTool from "@components/common/CommonTool.astro";
import CommonFooter from "@components/common/CommonFooter.astro";

---
<LayoutMain>
  <LayoutMainTop>
    <th:block th:if="${category!=null}"  th:with="rando=${#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)},
          bg=${#strings.isEmpty(category.categoryIcon)?('/nice/static/images/thumbs/'+rando+'.jpg'):category.categoryIcon}">
      <CommonTop
            bgImg="${bg}"
          >
      <div class="absolute w-screen top-[120px] left-0 h-auto text-center text-white">
            <div class="max-w-[800px] mx-auto overflow-hidden max-h-[90px]">
                <h1 class="text-[30px]" th:text="${category.categoryName}"> </h1>
                <p
                  class="mb-4 text-lg text-gray-600 dark:text-gray-400"
                  th:text="${category.remark}"
                >
                  介绍
                </p>
            </div>    
            <div class="mt-2 flex gap-2 flex-wrap justify-center ">
                <div class="mx-3 flex items-center flex-wrap font-medium mt-2"> <svg stroke="currentColor"
                        fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
                        class="mr-1 h-[18px] w-[18px] text-zinc-600 dark:text-zinc-500" height="1em" width="1em"
                        xmlns="http://www.w3.org/2000/svg">
                        <path
                            d="M0 18a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V8H0v10Zm14-7.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm-5-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm-5-4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1Zm0 4a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1ZM20 4a2 2 0 0 0-2-2h-2V1a1 1 0 0 0-2 0v1h-3V1a1 1 0 0 0-2 0v1H6V1a1 1 0 0 0-2 0v1H2a2 2 0 0 0-2 2v2h20V4Z">
                        </path>
                    </svg> <time th:text="${#dates.format(category.createTime, 'yyyy/MM/dd/HH/mm/ss')}">  </time> 
                  </div>
                  <div class="mx-3 flex items-center flex-wrap font-medium mt-2"> <svg xmlns="http://www.w3.org/2000/svg"
                        stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24"
                        class="mr-1 h-[18px] w-[18px] text-zinc-600 dark:text-zinc-500" height="1em" width="1em">
                        <path
                            d="M13 20a1 1 0 0 1-.64-.231L7 15.3l-5.36 4.469A1 1 0 0 1 0 19V2a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v17a1 1 0 0 1-1 1Z">
                        </path>
                    </svg> <a th:href="${webConfig['oly.web.domain']+'/category/'+category.categoryId}" class="mr-2 hover:text-primary font-medium capitalize" th:text="${'关联总数'+category.categoryPassCount}">  </a>
                </div>
            </div>
            
        </div>
      </CommonTop>
    </th:block>
    <th:block th:unless="${category!=null}" th:with="bgUrl=${'/nice/static/images/thumbs/'+#numbers.formatDecimal(T(java.lang.Math).floor(T(java.lang.Math).random()*10),1,0)+'.jpg'}"> 
      <CommonTop
            bgImg="${bgUrl}"
          >
            <div class="grid grid-cols-6 gap-4">
              <div class="col-start-2 col-span-4 text-center z-10">
                <h1
                  class="inline-block mb-2 text-3xl font-extrabold tracking-tight mt-36 text-gray-900 dark:text-white"
                >
                  没有找到任何数据！
                </h1>
                <p class="mb-4 text-lg text-gray-600 dark:text-gray-400">
                  请联系管理员或者稍后重试!
                </p>
              </div>
            </div>
      </CommonTop>
    </th:block>
  </LayoutMainTop>
  <LayoutMainBottom>
    <LayoutMainBottomLeft>
      <div th:if="${category!=null}" th:with="pageSize=${pageSize==null?10:pageSize[0]},
        data=${@articleTag.listWebArticleByCategoryId(themeName,categoryId,pageNum==null?1:pageNum[0],pageSize)},
        page=${'/category/'+categoryId+'?'},
        id=${category}"  >
        <ArticleList></ArticleList>
        <CommonPage></CommonPage>
      </div>
      <div th:unless="${category!=null}"  class="p-1 rounded-lg dark:text-white font-semibold text-slate-900 bg-gray-50 dark:bg-gray-800 min-h-screen" >
        未获取到数据！
      </div>
    </LayoutMainBottomLeft>
    <LayoutMainBottomRight>
      <AsideAuthor />

      <AsideComment />

      <AsideNotice />

      <AsideHotTag />

      <AsideArticleList />

      <AsideWebInfo />
      
    </LayoutMainBottomRight>
  </LayoutMainBottom>
</LayoutMain>
<CommonTool></CommonTool>
<LayoutFooter >
   <CommonFooter></CommonFooter>
</LayoutFooter>

